<template>
  <Card>
    <div class="flexCSB">
      <Button type="primary" @click="add">新增菜单</Button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      :loading="loading1"
      :tree-props="{ children: 'leaf', hasChildren: 'hasChildren' }"
    >
      <!-- <el-table-column prop="id" label="菜单ID" align="center">
      </el-table-column> -->
      <el-table-column prop="menuName" label="菜单名称" align="center">
      </el-table-column>
      <el-table-column prop="routing" label="路由地址" align="center">
      </el-table-column>
      <!-- <el-table-column prop="parentId" label="父级菜单" align="center">
      </el-table-column> -->
      <el-table-column prop="icon" label="图标" align="center">
      </el-table-column>
      <el-table-column prop="sort" label="权重" align="center">
      </el-table-column>
      <el-table-column prop="states" label="是否可见" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.states == '1'" type="success">可见</el-tag>
          <el-tag v-if="scope.row.states == '2'" type="danger">不可见</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="superAdminOwn"
        label="是否是系统内部菜单"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.superAdminOwn == true" type="success"
            >是</el-tag
          >
          <el-tag v-else type="danger">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="change(scope.row)"
            type="success"
            size="small"
          >
            修改
          </el-button>
          <el-button
            @click.native.prevent="del(scope.row)"
            type="error"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Modal title="banner管理" v-model="modal" width="50">
      <Form ref="form" :model="menuInfo" :label-width="160">
        <FormItem label="菜单名：">
          <Input
            v-model="menuInfo.menuName"
            placeholder="请输入菜单名"
            style="width: 100%"
          ></Input>
        </FormItem>
        <FormItem label="图标：">
          <Input v-model="menuInfo.icon" placeholder="请选择图标" disabled>
            <template slot="append"
              ><i
                class="el-icon-setting"
                style="cursor: pointer; font-size: 1.5em"
                @click="sMenuIcon = true"
            /></template>
          </Input>
        </FormItem>
        <FormItem>
          <span slot="label"
            ><el-tooltip
              class="item"
              effect="dark"
              content="浏览器显示的URL，例：/menu，对应打开页面为菜单页面"
              placement="top"
            >
              <i class="el-icon-question" /> </el-tooltip
            >路由地址:</span
          >
          <Input
            v-model="menuInfo.routing"
            placeholder="请输入路由地址"
            style="width: 100%"
          ></Input>
        </FormItem>
        <FormItem label="权限：">
          <Input
            v-model="menuInfo.permissions"
            placeholder="请输入权限"
            style="width: 100%"
          ></Input>
        </FormItem>
        <FormItem label="权重：">
          <Input-number :min="0" v-model="menuInfo.sort"></Input-number>
        </FormItem>
        <FormItem label="状态：">
          <Select v-model="menuInfo.states">
            <Option value=1>可见</Option>
            <Option value=2>不可见</Option>
          </Select>
        </FormItem>
        <FormItem label="是否是系统内部菜单：">
          <Select v-model="menuInfo.superAdminOwn">
            <Option value="true">是</Option>
            <Option value="false">否</Option>
          </Select>
        </FormItem>
        <FormItem label="父级菜单：">
          <Select v-model="menuInfo.parentId">
            <!-- <Option value="0">{{ "顶级" }}</Option> -->
            <Option
              v-for="(item, index) in parentMuen"
              :key="index"
              :value="item.id"
              >{{ item.menuName }}</Option
            >
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button
          type="primary"
          :loading="loading2"
          class="Button"
          @click="submit"
          >提交</Button
        >
      </div>
    </Modal>
    <!-- 选择图标的弹窗 -->
    <Modal title="" v-model="sMenuIcon" width="40">
      <el-tabs value="zidingyi">
        <el-tab-pane label="自定义图标" name="zidingyi">
          <ul class="icons">
            <li v-for="item in myIcons" :key="item" @click="selectIcon(item)">
              <SvgIcon :iconClass="item" />
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="系统图标" name="second">
          <ul class="icons">
            <li
              v-for="item in EleIcon"
              :key="item"
              @click="selectIcon('el-icon-' + item)"
            >
              <i :class="'el-icon-' + item" />
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </Modal>
  </Card>
</template>

<script>
import myIcons from "./svg-icons.js";
import EleIcon from "./element-icons";
import SvgIcon from "../../components/SvgIcon/index.vue";
export default {
  components: {
    SvgIcon,
  },
  data() {
    return {
      bug: 'bug',
      myIcons,
      EleIcon,
      loading1: false,
      loading2: false,
      tableData: [],
      modal: false,
      id: "",
      menuInfo: {
        menuName: "",
        icon: "",
        parentId: "",
        permissions: "",
        routing: "",
        sort: 0,
        states: "",
        superAdminOwn: "",
      },
      parentMuen: [],

      sMenuIcon: false,
    };
  },
  created() {
    this.getMenuInfo();
    this.getSelect();
  },
  methods: {
    getMenuInfo() {
      this.loading1 = true;
      this.$http("/chongqing/stage/menu/getMenuLeaf", {}, "get", (res) => {
        console.log(res);
        if (res.data.code == 1000) {
          this.tableData = res.data.data;
          this.loading1 = false;
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    getSelect() {
      this.$http("/chongqing/stage/menu/menuSelector", {}, "get", (res) => {
        if (res.data.code == 1000) {
          console.log(res.data);
          this.parentMuen = res.data.data;
          console.log(this.parentMuen);
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    change(params) {
      console.log(params);
      this.id = params.id;
      this.modal = true;
      this.menuInfo = {
        menuName: params.menuName,
        icon: params.icon,
        states: params.states + '', //需要字符串
        routing: params.routing,
        permissions: params.permissions,
        parentId: params.parentId,
        sort: params.sort,
        superAdminOwn: params.superAdminOwn + '',//需要字符串
      };
    },

    add() {
      this.modal = true;
      this.menuInfo = {
        menuName: "",
        icon: "",
        parentId: "",
        permissions: "",
        routing: "",
        sort: 0,
        states: "",
        superAdminOwn: "",
      };
      this.id = "";
    },
    submit() {
      this.loading2 = true;
      let data = {};
      if (this.id == "") {
        data = {
          menuName: this.menuInfo.menuName,
          icon: this.menuInfo.icon,
          states: this.menuInfo.states,
          routing: this.menuInfo.routing,
          permissions: this.menuInfo.permissions,
          parentId: this.menuInfo.parentId,
          sort: this.menuInfo.sort,
          superAdminOwn: this.menuInfo.superAdminOwn,
        };
        this.$http("/chongqing/stage/menu/addMenu", data, "post", (res) => {
          if (res.data.code == 1000) {
            this.$Message.success("提交成功");
            this.modal = false;
            this.getMenuInfo();
            this.getSelect();
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading2 = false;
        });
      } else {
        data = {
          menuName: this.menuInfo.menuName,
          icon: this.menuInfo.icon,
          states: this.menuInfo.states,
          routing: this.menuInfo.routing,
          permissions: this.menuInfo.permissions,
          parentId: this.menuInfo.parentId,
          sort: this.menuInfo.sort,
          superAdminOwn: this.menuInfo.superAdminOwn,
          id: this.id,
        };
        this.$http("/chongqing/stage/menu/updateMenu", data, "post", (res) => {
          if (res.data.code == 1000) {
            this.$Message.success("操作成功");
            this.modal = false;
            this.getMenuInfo();
            this.getSelect();
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading2 = false;
        });
      }
    },
    selectIcon(icon) {
      this.$set(this.menuInfo, "icon", icon);
      this.sMenuIcon = false;
    },
    del(row) {
      this.$confirm("此操作将永久删除该活动, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http(
            "/chongqing/stage/menu/deleteMenu",
            {
              id: row.id,
            },
            "post",
            (res) => {
              console.log(res);
              if (res.data.code == 1000) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                // this.reload();
                
                this.getMenuInfo();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                });
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.icons {
  list-style: none;
  padding: 0;
  overflow-y: scroll;
  height: 250px;
  li {
    display: inline-block;
    padding: 12px;
    margin: 3px 0;
    border-radius: 2px;
    font-size: 36px;
  }
  li:hover {
    cursor: pointer;
    color: #fff;
    background-color: #1890ff;
  }
}

.permissions > * {
  margin-right: 10px;
}
</style>